<template>
    <div class="row">
        <div class="col-sm-12 col-md-6 col-lg-3" v-for="info in infos">
            <router-link :to="'/PTSG/germ/germInfo/' + info.id" target="_blank">

            <div class="service-two__card projects-one__single">
                <div class="service-two__card-image">
                    <img :src="'/PTSG/images/getPhoto/' + info.id">
                </div>
                <div class="service-two__card-content">
                    <h3> {{info.name}} </h3>
                    <p>{{info.latin}}</p>
                </div>
                <div class="projects-one__content">
                    <table>
                        <tbody>
                            <tr><th>树种名：</th><td>{{info.name}}</td></tr>
                            <tr><th>Latin：</th><td><i>{{info.latin}}</i></td></tr>
                            <tr><th>Family：</th><td><i>{{info.familyLatin}}</i></td></tr>
                            <tr><th>Genus：</th><td><i>{{info.genusLatin}}</i></td></tr>
                            <tr><th>类别：</th><td>{{info.classes}}</td></tr>
                        </tbody>
                    </table>
                </div>
            </div>
            </router-link>
        </div>
    </div>

</template>

<script>
    export default {
        data(){
            return{
                "infos" : []
            }
        },
        mounted() {
            let _this = this;
            axios.post("/PTSG/germ/get8Banner").then(res=>{
                _this.infos = res.data;
            })
        }
    }


</script>

<style lang="scss">
    .service-two__card{
        margin-bottom: 20px;

        &:hover {
            cursor: pointer;
        }

        .service-two__card-image {
            img {
                height: 170px;
            }
        }

        .service-two__card-content{
            padding-top: 1px;
            padding-left: 10px;
            padding-right: 10px;

            h3{
                overflow: hidden;
                text-overflow:ellipsis;
                white-space: nowrap;
            }

            p{
                overflow: hidden;
                text-overflow:ellipsis;
                white-space: nowrap;
            }
        }

        .projects-one__content{
            padding: 10px;
            color: white;
            font-weight: bold;

            table{
                tbody{
                    th{
                        vertical-align: top;
                    }
                }
            }
        }

    }

</style>